/*******
 * 处理输入框的视图渲染
 * @params(item) 输入框的基本属性，必选参数
 * @params(form)  用于实现表单的校验，必选参数
 * @params(formItemLayout) 用户自定义label和select框的比例，可选参数
 * @return 输入框的视图
 *******/

import React from 'react';
import { Form, Input, InputNumber, DatePicker, TimePicker } from 'antd';
const FormItem = Form.Item;

export default function(item,form,formItemLayout,currentItem) {
    const inputProps = {
        item,
        form,
        formItemLayout,
        currentItem
    };
    switch (item.type) {
        case 'Input':
            return (
                <DealInput {...inputProps}/>
            );
        case 'InputNumber':
            return (
                <DealInputNumber {...inputProps} />
            );
        case 'DatePicker':
            return (
                <DealDatePicker {...inputProps}/>
            );
        case 'TimePicker':
            return (
                <DealTimePicker {...inputProps}/>
            );
        default:
            return;
    }
}

class DealInput extends React.Component {
    render(){
        const { item,form,formItemLayout,currentItem } = this.props;
        const { getFieldDecorator } = form;
        return (
            <FormItem label={item.label} {...formItemLayout}>
                {getFieldDecorator(item.filed, {
                    initialValue: currentItem[item.filed],
                    rules: item.rules
                })(
                    <Input placeholder={item.placeholder}/>
                )}
            </FormItem>
        )
    }
}

class DealInputNumber extends React.Component {
    render(){
        const { item,form,formItemLayout,currentItem } = this.props;
        const { getFieldDecorator } = form;
        return (
            <FormItem label={item.label} {...formItemLayout}>
                {getFieldDecorator(item.filed, {
                    initialValue: currentItem[item.filed],
                    rules: item.rules
                })(
                    <InputNumber placeholder={item.placeholder} style={{width: '100%'}}/>
                )}
            </FormItem>
        )
    }
}

class DealDatePicker extends React.Component {
    onChange = (value,string) => {
        const { getFieldsValue,setFieldsValue } = this.props.form;
        let data = getFieldsValue();
        data['date'] = string;
        setFieldsValue(data);
    };
    render(){
        const { item,form,formItemLayout,currentItem } = this.props;
        const { getFieldDecorator } = form;
        return (
            <FormItem label={item.label} {...formItemLayout}>
                {getFieldDecorator(item.filed, {
                    initialValue: currentItem[item.filed],
                    rules: item.rules
                })(
                    <DatePicker placeholder={item.placeholder} style={{width: '100%'}}
                                format={item.dateFormat} onChange={this.onChange}/>
                )}
            </FormItem>
        )
    }
}

class DealTimePicker extends React.Component {
    onChange = (value,string) => {
        const { getFieldsValue,setFieldsValue } = this.props.form;
        let data = getFieldsValue();
        data['date'] = string;
        setFieldsValue(data);
    };
    render(){
        const { item,form,formItemLayout,currentItem } = this.props;
        const { getFieldDecorator } = form;
        return (
            <FormItem label={item.label} {...formItemLayout}>
                {getFieldDecorator(item.filed, {
                    initialValue: currentItem[item.filed],
                    rules: item.rules
                })(
                    <TimePicker placeholder={item.placeholder} style={{width: '100%'}}
                                format={item.dateFormat} onChange={this.onChange}/>
                )}
            </FormItem>
        )
    }
}